'use client';

import { Button, Card, Typography, Grid, Space } from '@arco-design/web-react';
import { useRouter } from 'next/navigation';
import { useAuth } from '@/contexts/AuthContext';

const { Title, Paragraph } = Typography;
const { Row, Col } = Grid;

export default function Home() {
  const router = useRouter();
  const { isAuthenticated, userType } = useAuth();

  return (
    <div className="flex flex-col items-center justify-center min-h-[80vh]">
      <Title className="mb-8">酒店管理系统</Title>
      
      <Row gutter={[24, 24]} className="w-full max-w-4xl">
        <Col span={24}>
          <Card>
            <Title heading={3}>欢迎使用酒店管理系统</Title>
            <Paragraph>
              本系统提供完整的酒店房间管理、预订、入住与退房服务。
            </Paragraph>
            
            <Space size="large" className="mt-4">
              {!isAuthenticated && (
                <>
                  <Button type="primary" onClick={() => router.push('/login')}>
                    客户登录
                  </Button>
                  <Button type="secondary" onClick={() => router.push('/register')}>
                    客户注册
                  </Button>
                  <Button type="outline" onClick={() => router.push('/admin/login')}>
                    管理员登录
                  </Button>
                </>
              )}
              
              {isAuthenticated && userType === 'customer' && (
                <>
                  <Button type="primary" onClick={() => router.push('/rooms')}>
                    浏览房间
                  </Button>
                  <Button type="secondary" onClick={() => router.push('/bookings')}>
                    我的预订
                  </Button>
                </>
              )}
              
              {isAuthenticated && userType === 'admin' && (
                <>
                  <Button type="primary" onClick={() => router.push('/admin/rooms')}>
                    房间管理
                  </Button>
                  <Button type="secondary" onClick={() => router.push('/admin/bookings')}>
                    预订管理
                  </Button>
                  <Button type="outline" onClick={() => router.push('/admin/checkin')}>
                    入住/退房
                  </Button>
                </>
              )}
            </Space>
          </Card>
        </Col>
      </Row>
    </div>
  );
}
